<template>
  <div class="app-container">
<!--    <el-scrollbar max-height="650px">-->
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in flowRecordList"
          :key="index"
          :color="setColor(item.finishTime)"
        >
          <p style="font-weight: 700">{{ item.taskName }}</p>
          <el-card :body-style="{ padding: '10px' }">
            <el-descriptions class="margin-top" :column="1" size="small" border>
              <template v-if="item.refill">
                <el-descriptions-item v-if="item.startUserName" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-user"></i>申请人</template>
                  {{ item.startUserName }}
                  <el-tag effect="plain" type="info" size="mini">{{ item.startDeptName }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label">
                  <template slot="label"><i class="el-icon-time"></i>申请时间</template>
                  {{ item.createTime }}
                </el-descriptions-item>
                <el-descriptions-item v-if="item.commentList.length > 0" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-tickets"></i>申请备注</template>
                  <span :key="index" v-for="(comment, index) in item.commentList">{{ comment.content }}</span>
                </el-descriptions-item>
              </template>
              <template v-else>
                <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-user"></i>办理人</template>
                  {{ item.assigneeName }}
                  <el-tag effect="plain" type="info" size="mini">{{ item.deptName }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-user"></i>候选办理</template>
                  {{ item.candidate }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="my-label">
                  <template slot="label"><i class="el-icon-time"></i>办理耗时</template>
                  {{ item.duration }}（ {{ item.createTime }} - {{ item.finishTime }} ）
                </el-descriptions-item>
                <el-descriptions-item v-if="item.commentList.length > 0" label-class-name="my-label">
                  <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
                  <el-collapse :value="getExpandNames(item.commentList)">
                    <el-collapse-item :name="index" :key="index" v-for="(comment, index) in item.commentList">
                      <template slot="title">
                        <el-tag effect="plain" size="mini" :type="comment.style">{{ comment.remark }}</el-tag>
                        <span style="margin-left: 5px;color: #909399;font-size: 12px">{{ comment.dateTime }}</span>
                      </template>
                      <span>{{ comment.content }}</span>
                    </el-collapse-item>
                  </el-collapse>
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
<!--    </el-scrollbar>-->
  </div>
</template>

<script>
export default {
  name: 'FlowRecord',
  props: {
    flowRecordList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 根据完成时间设置不同的颜色
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
    // 展开所有的意见
    getExpandNames(item){
      return item.map((_, index) => index);
    }
  }
}
</script>
<style>
.my-label {
  width: 100px;
  text-align: right;
  color: #909399;
}
</style>
